<template>
  <vxe-grid
    ref="vxeTable"
    class="kdf-table"
    :columns="columns"
    :data="dataSource"
    :edit-rules="validRules"
    v-bind="vxeTableOption"
  >
  </vxe-grid>
</template>

<script>
export default {
  props: ['record', 'value', 'dynamicData', 'config', 'parentDisabled'],
  data() {
    return {
      dataSource: [],
      validRules: {},
      insertAtIndex: null
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.dataSource = val
        } else {
          this.dataSource = []
        }
      }
    }
  },
  computed: {
    disabled() {
      return this.record.options.disabled || this.parentDisabled
    },
    vxeTableOption() {
      return {
        border: true,
        resizable: true,
        'keep-source': true,
        'max-height': 500,
        'edit-config': this.disabled ? false : { trigger: 'click', mode: 'row', showStatus: true, autoClear: false },
        'checkbox-config': { checkMethod: () => !this.disabled },
        toolbarConfig: {
          buttons: [
            { buttonRender: { name: 'VxeToolbarAdd', events: { click: this.handleAdd }, disabled: this.disabled }},
            { buttonRender: { name: 'VxeToolbarDel', events: { click: this.batchDel }, disabled: this.disabled }}
          ],
          perfect: true,
          'class-name': 'z-vxe-toolbar'
        }
      }
    },
    columns() {
      const columns = [
        { type: 'checkbox', width: 40 }

      ]
      if (!this.record.options.hideSequence) {
        columns.push({ type: 'seq', width: 40 })
      }
      this.record.list.forEach((item, index) => {
        if (item.options.hidden) {
          return
        }
        columns.push({
          title: item.label,
          field: item.key,
          width: index === this.record.list.length - 1 ? '' : '190px',
          editRender: { ...this.getEditRender(item) }
        })
        if (item.rules && item.rules.length > 0) {
          item.rules.forEach(rule => {
            this.validRules[item.key] = this.validRules[item.key] ? this.validRules[item.key] : []
            if (rule.required) {
              this.validRules[item.key].push({ required: rule.required, message: rule.message, trigger: 'change' })
            } else {
              this.validRules[item.key].push({ pattern: rule.pattern, message: rule.message, trigger: 'change' })
            }
          })
        }
      })
      return columns
    }
  },
  methods: {
    async handleAdd(key, target) {
      target.insertAt({}, this.insertAtIndex).then(({ row }) => {
        target.setActiveRow(row)
      })
    },
    batchDel(key, target) {
      target.removeCheckboxRow()
    },
    getEditRender(item) {
      const option = {
        name: '',
        props: {
          // ...item.options,
          config: this.config,
          disabled: this.disabled || item.options.disabled,
          // parentDisabled: this.disabled || item.options.disabled,
          allowClear: item.options.clearable,
          mode: item.options.multiple ? 'multiple' : '',
          style: `width:${item.options.width}`,
          height:
          typeof item.options.height !== 'undefined'
            ? item.options.height
            : '',
          options: !item.options.dynamic
            ? item.options.options
            : this.dynamicData[item.options.dynamicKey]
              ? this.dynamicData[item.options.dynamicKey]
              : []
          // dynamicData: this.dynamicData,
        },
        options: !item.options.dynamic
          ? item.options.options
          : this.dynamicData[item.options.dynamicKey]
            ? this.dynamicData[item.options.dynamicKey]
            : []
      }
      const type = item.type
      switch (type) {
        case 'input':
          option.name = 'AInput'
          break
        case 'textarea':
          option.name = 'AInput'
          break
        case 'number':
          option.name = 'AInputNumber'
          break
        case 'select':
          option.name = 'ASelect'
          break
        case 'checkbox':
          option.name = 'ASelect'
          option.props.mode = 'multiple'
          // option.name = 'ACheckbox'
          break
        case 'radio':
          option.name = 'ASelect'
          // option.name = 'ARadio'
          break
        case 'date':
          option.name = 'ADatePicker'
          break
        case 'time':
          option.name = 'ATimePicker'
          break
        case 'rate':
          option.name = 'ARate'
          break
        case 'slider':
          option.name = 'ASlider'
          break
        case 'switch':
          option.name = 'ASwitch'
          break
        case 'text':
          option.name = 'text'
          break
        case 'html':
          option.name = 'html'
          break
        case 'cascader':
          option.name = 'ACascader'
          break
        case 'treeSelect':
          option.name = 'ATreeSelect'
          break
        default:
          option.name = 'AInput'
          break
      }
      return option
    },
    async validationSubform() {
      const table = this.$refs.vxeTable
      const err = await table.validate()
      if (err) {
        return !err
      } else {
        const { fullData } = table.getTableData()
        return { values: fullData, key: this.record.key }
      }
    }
  }
}
</script>

<style lang="less">
.kdf-table .vxe-button--item{
  line-height: 1 !important;
}
</style>
